import viewMode from "@/store/viewMode"
import { Button } from "@tarojs/components"
import React, { PropsWithChildren, useEffect } from "react"
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from "taro-ui"

const Modal: React.FC<PropsWithChildren<{
    title?: string,
    visible: boolean,
    onClose?: () => void,
    onSure: () => void,
}>> = ({ title, visible, onClose, children, onSure }) => {

    useEffect(() => {
        viewMode.isBehind = visible
    }, [visible])

    return (
        <AtModal isOpened={visible} className="edit-modal" onClose={onClose}>
            {title ? <AtModalHeader>{title}</AtModalHeader> : null}
            <AtModalContent>
                {children}
            </AtModalContent>
            <AtModalAction>
                {onClose ? <Button onClick={onClose}>取消</Button> : null}
                <Button onClick={onSure}>确定</Button>
            </AtModalAction>
        </AtModal>
    )
}

export default Modal